<template>
	<view class="content">
		<view class="" style="height: 90rpx;">

		</view>
		<view class="bgColor">
			<image src="/static/mine/dxyhxBg.png" mode="widthFix"></image>
		</view>
		<cusHeaderVue titleContent="动销员画像" :showBack="true"></cusHeaderVue>
		<view class="contBox">
			<view class="header">
				<view class="headerImg">
					<image :src="mobilizerDetail.userStaticData.avatar" mode="aspectFill"></image>
				</view>
				<view class="headerCont">
					<view class="headerName" v-if="mobilizerDetail.nickname">
						{{ mobilizerDetail.nickname || '未知' }}
					</view>
					<view class="headerName" v-else>
						{{ mobilizerDetail.userStaticData.nickname || '未知' }}
					</view>
					<view class="headerTag">
						岗位：<text>动销员</text>
					</view>
				</view>
			</view>
			<view class="ldt" style="width: 100%;height: 450rpx;">
				<qiun-data-charts :tooltipShow="false" :ontouch="ontouch" type="radar" :opts="opts"
					:chartData="chartsDataRadar2" />
			</view>
			<view class="bottomBig">
				<view class="box">
					<view class="boxTit">
						<view class="boxTitLeft">
							<image src="/static/mine/sjzb.png" mode=""></image>
							<view class="boxTitName">
								数据指标
							</view>
						</view>
					</view>
					<view class="boxMsg">
						<view class="boxMsgLi">
							<image src="/static/mine/dbrw.png" mode=""></image>
							<view class="boxMsgNum">
								{{ mobilizerDetail.userStaticData?.taskNum || 0 }}<text>个</text>
							</view>
							<view class="boxMsgName">
								特殊任务
							</view>
						</view>
						<view class="boxMsgLi">
							<image src="/static/mine/dkcs.png" mode=""></image>
							<view class="boxMsgNum">
								{{ mobilizerDetail.userStaticData?.totalCheckNum || 0 }}<text>次</text>
							</view>
							<view class="boxMsgName">
								累计打卡
							</view>
						</view>
						<view class="boxMsgLi">
							<image src="/static/mine/mendian.png" mode=""></image>
							<view class="boxMsgNum">
								{{ mobilizerDetail.userStaticData?.shopNum || 0 }}<text>家</text>
							</view>
							<view class="boxMsgName">
								负责门店
							</view>
						</view>
					</view>
					<view class="boxMsg" style="background: #fcf3f3;">
						<view class="boxMsgLi">
							<image src="/static/mine/dyxs.png" mode=""></image>
							<view class="boxMsgNum">
								{{ mobilizerDetail.userStaticData?.periodSaleMoney || 0 }}<text>元</text>
							</view>
							<view class="boxMsgName">
								当月销售
							</view>
						</view>
						<view class="boxMsgLi">
							<image src="/static/mine/ljxs.png" mode="" style="width: 41rpx;"></image>
							<view class="boxMsgNum">
								{{ mobilizerDetail.userStaticData?.totalSaleMoney || 0 }}<text>元</text>
							</view>
							<view class="boxMsgName">
								累计销售
							</view>
						</view>
						<view class="boxMsgLi">
							<image src="/static/mine/zbwcl.png" mode=""></image>
							<view class="boxMsgNum">
								{{ mobilizerDetail.userStaticData.zbLv }}<text>%</text>
							</view>
							<view class="boxMsgName">
								指标完成率
							</view>
						</view>
					</view>
				</view>
				<!-- 年月筛选框 -->
				<view class="screenBox">
					<view class="timeSx" @click="selectMonth">
						{{ selectedMonth }}
						<u-icon name="arrow-down-fill" color="#F79F31" size="10"></u-icon>
					</view>
				</view>
				<view class="box">
					<view class="boxTit">
						<view class="boxTitLeft">
							<image src="/static/mine/lsjx.png" mode=""></image>
							<view class="boxTitName">
								历史绩效
							</view>
						</view>
						<u-icon name="arrow-right" color="#bdc1c5" size="15" @click="togglePerformance"
							:class="isPerformanceExpanded ? 'rotate-180' : ''"
							style="cursor: pointer; transition: transform 0.3s ease;"></u-icon>
					</view>
					<view v-if="isPerformanceExpanded">
						<view
							v-if="saleAndMaterialsDetail.performanceList && saleAndMaterialsDetail.performanceList.length > 0">
							<view class="performance"
								v-for="(item, index) in (showAllPerformance ? saleAndMaterialsDetail.performanceList : saleAndMaterialsDetail.performanceList.slice(0, 3))"
								:key="index">
								<view class="performanceName">
									{{ item.month }}绩效考核
								</view>
								<view class="performanceTag">
									{{ item.score }}分
								</view>
							</view>
							<!-- 查看更多/收起按钮 -->
							<view v-if="saleAndMaterialsDetail.performanceList.length > 3" class="viewMoreBtn"
								@click="toggleShowAllPerformance">
								{{ showAllPerformance ? '收起' : '查看更多' }}
							</view>
						</view>
						<view v-else class="emptyText">暂无历史绩效数据</view>
					</view>
				</view>

				<view class="box">
					<view class="boxTit">
						<view class="boxTitLeft">
							<image src="/static/mine/wllqqk.png" mode=""></image>
							<view class="boxTitName">
								物料领取情况
							</view>
						</view>
					</view>
					<view v-if="saleAndMaterialsDetail.materialList && saleAndMaterialsDetail.materialList.length > 0">
						<view class="materialCollection" v-for="(item, index) in saleAndMaterialsDetail.materialList"
							:key="index">
							<view class="materialCollectionTop">
								<view class="materialCollectionName">
									{{ item.materialName }}
								</view>
							</view>
							<view class="materialCollectionBox">
								<view class="materialCollectionLi">
									领取数量<text>{{ item.receiveCount }}</text>
								</view>
								<view class="materialCollectionLi">
									投放数量<text>{{ item.deliverCount }}</text>
								</view>
								<view class="materialCollectionLi">
									领取日期<text>{{ item.receiveDate }}</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="emptyText">暂无物料领取数据</view>
				</view>

				<view class="box">
					<view class="boxTit">
						<view class="boxTitLeft">
							<image src="/static/mine/xsqk.png" mode=""></image>
							<view class="boxTitName boxTitNameSell">
								销售情况
							</view>
						</view>
					</view>
					<view v-if="saleAndMaterialsDetail.saleList && saleAndMaterialsDetail.saleList.length > 0">
						<view class="materialCollection materialCollectionA"
							v-for="(item, index) in saleAndMaterialsDetail.saleList" :key="index">
							<view class="materialCollectionTop">
								<view class="materialCollectionName">
									{{ item.productName }}
								</view>
							</view>
							<view class="materialCollectionBox">
								<view class="materialCollectionLi">
									销售金额<text>{{ item.saleAmount }}</text>
								</view>
								<view class="materialCollectionLi">
									日期<text>{{ item.saleDate }}</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="emptyText">暂无销售数据</view>
				</view>

				<view class="box">
					<view class="boxTit">
						<view class="boxTitLeft">
							<image src="/static/mine/pxzy.png" mode=""></image>
							<view class="boxTitName boxTitNameJob">
								培训作业
							</view>
						</view>
					</view>
					<view v-if="saleAndMaterialsDetail.trainingList && saleAndMaterialsDetail.trainingList.length > 0">
						<view class="materialCollection materialCollectionJob"
							v-for="(item, index) in saleAndMaterialsDetail.trainingList" :key="index">
							<view class="materialCollectionTop">
								<view class="materialCollectionName">
									{{ item.trainingTitle }}
								</view>
							</view>
							<view class="materialCollectionBox">
								<view class="materialCollectionLi" style="width: 100%;">
									<view class="materialCollectionLiName">
										提交内容
									</view>
									<text style="color: #3A66F3;">{{ item.submitContent || '无' }}</text>
								</view>
								<view class="materialCollectionLi" style="width: 100%;">
									<view class="materialCollectionLiName">
										日期
									</view>
									<text>{{ item.submitDate }}</text>
								</view>
								<!-- 媒体文件查看按钮 -->
								<view class="materialCollectionLi media-buttons" style="width: 100%;">
									<!-- 文件下载按钮 -->
									<view v-if="item.files && item.files.length > 0" class="media-btn download-btn"
										@click="viewFile(item.files)">
										<image src="/static/mine/cl.png" mode="aspectFit" class="media-icon"></image>
										<text>文件下载</text>
									</view>
									<!-- 图片查看按钮 -->
									<view v-if="item.images && item.images.length > 0" class="media-btn image-btn"
										@click="viewImage(item.images)">
										<image src="/static/home/fujian.png" mode="aspectFit" class="media-icon">
										</image>
										<text>图片查看</text>
									</view>
									<!-- 视频查看按钮 -->
									<view v-if="item.videos && item.videos.length > 0" class="media-btn video-btn"
										@click="viewVideo(item.videos)">
										<image src="/static/home/fpl.png" mode="aspectFit" class="media-icon"></image>
										<text>视频查看</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="emptyText">暂无培训作业数据</view>
				</view>

				<view class="box">
					<view class="boxTit">
						<view class="boxTitLeft">
							<image src="/static/mine/qjjl.png" mode=""></image>
							<view class="boxTitName boxTitNameLeave">
								请假记录
							</view>
						</view>
					</view>
					<view v-if="saleAndMaterialsDetail.leaveList && saleAndMaterialsDetail.leaveList.length > 0">
						<view class="materialCollection materialCollectionLeave"
							v-for="(item, index) in saleAndMaterialsDetail.leaveList" :key="index">
							<view class="materialCollectionTop">
								<view class="materialCollectionName">
									{{ item.leaveDate }}
								</view>
							</view>
							<view class="materialCollectionBox">
								<view class="materialCollectionLi" style="width: 100%;">
									请假事由<text>{{ item.leaveReason }}</text>
								</view>
								<view class="materialCollectionLi" style="width: 100%;">
									请假天数<text>{{ item.leaveDays }}</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="emptyText">暂无请假记录</view>
				</view>
			</view>
		</view>


		<MonthPickerPopup ref="monthPickerRef" @confirm="onMonthConfirm" @cancel="onMonthCancel" />

	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		nextTick
	} from 'vue';
	import cusHeaderVue from '@/components/cus-header.vue';
	// ✅ 正确引入 uni-popup（HBuilderX uni_modules 路径）
	import UniPopup from '/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import MonthPickerPopup from '@/components/MonthPickerPopup.vue';
	import {
		getMobilizersDetail,
		getMobilizersSaleAndMaterialsClaimCursesSubmitDetail
	} from '@/api/interface.js';
	import {
		formatDate
	} from '@/utils/date.js';
	// 注册组件
	const components = {
		UniPopup
	};

	const scrollerHeight = ref('');

	const monthPickerRef = ref(null);
	const selectedMonth = ref('');
	const mobilizerDetail = ref({});
	const isLoading = ref(false);
	const saleAndMaterialsDetail = ref({});
	const mobilizerId = ref(''); // 存储动销员ID的响应式变量
	const isPerformanceExpanded = ref(true); // 历史绩效展开状态
	const showAllPerformance = ref(false); // 控制是否显示所有历史绩效数据




	// 初始化默认月份
	const initDefaultMonth = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		selectedMonth.value = `${year}年${month}月`;
	};

	// 打开年月选择器
	const selectMonth = () => {
		monthPickerRef.value.open();
	};

	// 选择确认
	const onMonthConfirm = (month) => {
		selectedMonth.value = month;
		console.log('用户选择的月份:', month);
		// 优先使用mobilizerId响应式变量，确保ID的准确性
		const uid = mobilizerId.value || mobilizerDetail.value.id;
		// 重新加载销售和物料领取详情
		if (uid) {
			loadSaleAndMaterialsDetail(uid);
		} else {
			console.log('动销员ID尚未加载完成，等待详情加载后再获取销售数据');
		}
	};

	// 取消（可选处理）
	const onMonthCancel = () => {
		// 可不处理，或做日志等
	};

	// 切换历史绩效展开/收起状态
	const togglePerformance = () => {
		isPerformanceExpanded.value = !isPerformanceExpanded.value;
	};

	// 切换显示全部或仅显示3条历史绩效数据
	const toggleShowAllPerformance = () => {
		showAllPerformance.value = !showAllPerformance.value;
	};


	// 雷达图数据
	const chartsDataRadar2 = ref({
		categories: ["积极性", "转化力", "沟通能力", "责任心", "销售力"],
		series: [{
			name: "",
			data: [0, 0, 0, 0, 0],
			color: '#f49233'
		}]
	});

	const ontouch = ref(true);
	const opts = ref({
		padding: [5, 5, 5, 5],
		dataLabel: false,
		dataPointShape: false,
		enableScroll: false,
		legend: {
			show: false,
			position: "bottom",
			lineHeight: 25
		},
		extra: {
			radar: {
				gridType: "circle",
				gridColor: "#f9c993",
				gridCount: 5,
				opacity: 1,
				max: 100,
				labelShow: true,
				border: true,
			},
			tooltip: {
				show: false,
				backgroundColor: 'rgba(0,0,0,0)',
				format: () => ''
			}
		}
	});

	// 获取状态栏高度（不变）
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(res) {
				scrollerHeight.value = res.statusBarHeight + 'px';
			}
		});
	};

	const toUrl = (urlSrc) => {
		uni.navigateTo({
			url: urlSrc
		});
	};

	// 查看文件
	const viewFile = (files) => {
		if (files && files.length > 0) {
			const file = files[0];
			// 假设文件对象包含url属性
			uni.downloadFile({
				url: file.url || file,
				success: (res) => {
					if (res.statusCode === 200) {
						// 打开文件
						uni.openDocument({
							filePath: res.tempFilePath,
							showMenu: true,
							success: () => {
								console.log('文件打开成功');
							},
							fail: (err) => {
								console.error('文件打开失败:', err);
								uni.showToast({
									title: '文件打开失败',
									icon: 'none'
								});
							}
						});
					}
				},
				fail: (err) => {
					console.error('文件下载失败:', err);
					uni.showToast({
						title: '文件下载失败',
						icon: 'none'
					});
				}
			});
		}
	};

	// 查看图片
	const viewImage = (images) => {
		if (images && images.length > 0) {
			// 将图片数组转换为uni.previewImage支持的格式
			const urls = images.map(img => img.url || img);
			uni.previewImage({
				urls: urls,
				current: 0,
				success: () => {
					console.log('图片预览成功');
				},
				fail: (err) => {
					console.error('图片预览失败:', err);
					uni.showToast({
						title: '图片预览失败',
						icon: 'none'
					});
				}
			});
		}
	};

	// 查看视频
	const viewVideo = (videos) => {
		if (videos && videos.length > 0) {
			const video = videos[0];
			const src = video.url || video;
			uni.navigateTo({
				url: `/pages/common/videoPlayer?src=${encodeURIComponent(src)}`,
				fail: (err) => {
					console.error('打开视频播放器失败:', err);
					// 如果没有专门的视频播放页面，可以使用默认的视频播放
					uni.showToast({
						title: '请先配置视频播放页面',
						icon: 'none'
					});
				}
			});
		}
	};

	// 获取动销员详情
	const loadMobilizerDetail = async (uid) => {
		// 优先使用传入的uid参数，其次使用mobilizerId响应式变量
		const targetUid = uid || mobilizerId.value;
		if (!targetUid) {
			console.error('动销员ID不存在');
			return;
		}

		// 确保mobilizerId变量始终包含最新的ID
		mobilizerId.value = targetUid;

		isLoading.value = true;
		try {
			console.log('调用getMobilizersDetail接口，参数:', {
				uid: targetUid
			});
			const res = await getMobilizersDetail({
				uid: targetUid
			});
			console.log('接口返回结果:', res);

			if (res.code === 0) {
				// 保存完整的响应数据
				mobilizerDetail.value = res.data || {};
				console.log('动销员详情数据加载成功');

				// 更新雷达图数据
				chartsDataRadar2.value.series[0].data = [
					res.data.jjx || 0, // 积极性
					res.data.zhl || 0, // 转化力
					res.data.gtl || 0, // 沟通能力
					res.data.zrx || 0, // 责任心
					res.data.xxl || 0 // 销售力
				];

				// 更新历史绩效数据（从userSalary字段获取）
				if (res.data.userSalary && Array.isArray(res.data.userSalary)) {
					// 初始化saleAndMaterialsDetail对象（如果不存在）
					if (!saleAndMaterialsDetail.value) {
						saleAndMaterialsDetail.value = {};
					}
					// 将userSalary数据转换为前端需要的格式并存储
					saleAndMaterialsDetail.value.performanceList = res.data.userSalary.map(item => ({
						month: item.month || '', // 月份
						score: item.score || 0 // 分数
					}));
					console.log('历史绩效数据更新成功:', saleAndMaterialsDetail.value.performanceList);
				}

				// 确保selectedMonth已经初始化后再加载销售和物料领取详情
				if (selectedMonth.value) {
					loadSaleAndMaterialsDetail(targetUid);
				} else {
					// 如果selectedMonth未初始化，等待nextTick确保initDefaultMonth已执行
					await nextTick();
					loadSaleAndMaterialsDetail(targetUid);
				}
			} else {
				console.error('接口返回错误:', res.message);
				uni.showToast({
					title: res.message || '获取动销员详情失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取动销员详情异常:', error);
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			});
		} finally {
			isLoading.value = false;
		}
	};

	// 转换审批步骤
	const formatTime = (timestamp) => {
		const date = new Date(timestamp);
		// 处理时间戳可能为字符串的情况
		if (isNaN(date.getTime())) {
			return ''; // 非法时间戳返回空
		}

		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，补零
		const day = String(date.getDate()).padStart(2, '0');
		const hour = String(date.getHours()).padStart(2, '0');
		const minute = String(date.getMinutes()).padStart(2, '0');

		// 统一格式：YYYY-MM-DD HH:MM
		return `${year}-${month}-${day} ${hour}:${minute}`;
	};
	// 获取动销员销售和物料领取详情
	const loadSaleAndMaterialsDetail = async (uid) => {
		// 优先使用传入的uid参数，其次使用mobilizerId响应式变量
		const targetUid = uid || mobilizerId.value;
		if (!targetUid) {
			console.error('动销员ID不存在');
			return;
		}

		// 验证selectedMonth是否存在
		if (!selectedMonth.value) {
			console.error('选择的月份不存在');
			return;
		}

		isLoading.value = true;
		try {
			// 使用formatDate格式化月份为接口需要的YYYY-MM格式
			const monthStr = formatDate(selectedMonth.value);
			console.log('格式化后的月份:', monthStr);

			if (!monthStr) {
				console.error('月份格式无效');
				return;
			}

			console.log('调用getMobilizersSaleAndMaterialsClaimCursesSubmitDetail接口，参数:', {
				uid: targetUid,
				monthStr
			});
			const res = await getMobilizersSaleAndMaterialsClaimCursesSubmitDetail({
				uid: targetUid,
				monthStr
			});
			console.log('销售和物料领取详情接口返回结果:', res);

			if (res.code === 0) {
				// 保留现有的历史绩效数据
				const currentPerformanceList = saleAndMaterialsDetail.value?.performanceList;

				// 转换数据结构，将接口返回的数据映射到前端模板期望的字段名称
				const transformedData = {
					// 保留历史绩效数据
					performanceList: currentPerformanceList,

					// 物料领取情况：将dxMaterialsClaims转换为materialList
					materialList: Array.isArray(res.data.dxMaterialsClaims) ? res.data.dxMaterialsClaims.map(
						item => ({
							materialName: item.name || '',
							receiveCount: item.num || 0,
							deliverCount: item.ylNum || 0,
							// receiveDate: item.createTime ? new Date(item.createTime).toLocaleDateString() : ''
							receiveDate: item.createTime ? formatTime(item.createTime) : ''
						})) : [],

					// 销售情况：将saleDOS转换为saleList
					saleList: Array.isArray(res.data.saleDOS) ? res.data.saleDOS.map(item => ({
						productName: item.productName || '',
						saleAmount: item.money || 0,
						saleDate: item.saleDate || ''
					})) : [],

					// 培训作业数据：将submitDOS转换为trainingList并映射字段，包括媒体文件
					trainingList: Array.isArray(res.data.submitDOS) ? res.data.submitDOS.map(item => ({
						trainingTitle: item.title || '',
						submitContent: item.content || '',
						submitDate: item.createTime ? formatTime(item.createTime) : '',
						// 处理文件信息（单个URL）
						files: item.fileUrl ? [{
							url: item.fileUrl
						}] : [],
						// 处理图片信息（逗号分隔的URL字符串转数组）
						images: item.imageUrl ? item.imageUrl.split(',').map(url => ({
							url: url.trim()
						})) : [],
						// 处理视频信息（单个URL）
						videos: item.videoUrl ? [{
							url: item.videoUrl
						}] : []
					})) : [],

					// 请假记录数据：将requestsDOS转换为leaveList并映射字段
					leaveList: Array.isArray(res.data.requestsDOS) ? res.data.requestsDOS.map(item => ({
						leaveDate: item.startTime || '',
						leaveReason: item.reasonStr || '',
						leaveDays: item.num || 0
					})) : []
				};

				// 更新响应式数据
				saleAndMaterialsDetail.value = transformedData;
				console.log('动销员销售和物料领取详情数据加载成功并完成格式转换');

				// 日志记录各模块数据数量
				console.log('物料领取数据:', transformedData.materialList.length, '条');
				console.log('销售数据:', transformedData.saleList.length, '条');
				console.log('培训作业数据:', transformedData.trainingList.length, '条');
				console.log('请假记录数据:', transformedData.leaveList.length, '条');
			} else {
				console.error('接口返回错误:', res.message);
				uni.showToast({
					title: res.message || '获取销售和物料领取详情失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取销售和物料领取详情异常:', error);
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			});
		} finally {
			isLoading.value = false;
		}
	};

	onLoad((options) => {
		getBarHeight();
		initDefaultMonth();
		// 获取路由参数中的动销员ID
		const uid = options.id;
		console.log('获取到的动销员ID:', uid);
		// 将动销员ID存储在响应式变量中，确保在其他地方也能访问到
		mobilizerId.value = uid;
		// 调用接口获取动销员详情
		loadMobilizerDetail(uid);
	});
</script>

<style lang="scss" scoped>
	/* ========== 以下是你原有的全部样式，完全保留 ========== */
	.content {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	/* 空数据提示样式 */
	.emptyText {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 40rpx 0;
		background: #f8f8f8;
		border-radius: 8rpx;
		margin-top: 16rpx;
	}

	/* 查看更多/收起按钮样式 */
	.viewMoreBtn {
		text-align: center;
		color: #07c160;
		font-size: 28rpx;
		padding: 20rpx 0;
		cursor: pointer;
	}

	.bgColor {
		width: 100%;
		height: 100vh;
		position: absolute;
		z-index: -1;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/* 新增：筛选框容器 */
	.screenBox {
		display: flex;
		justify-content: flex-end;
		padding: 0 22rpx;
		margin-bottom: 12rpx;
		width: 100%;
		box-sizing: border-box;
	}

	/* 复用你已有的 .timeSx 样式 */
	.timeSx {
		height: 50rpx;
		color: #f79f31;
		font-weight: 400;
		font-size: 25.64rpx;
		padding: 16rpx 17rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 10.26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		width: 100%;


		&Name {
			margin-right: 20rpx;
		}
	}

	.contBox {
		.header {
			width: 690.38rpx;
			height: 171.79rpx;
			background: #fff5e3;
			padding: 22rpx;
			box-sizing: border-box;
			margin: 0 auto;
			display: flex;
			align-items: center;

			.headerImg {
				width: 95.55rpx;
				height: 95.55rpx;
				background: #f8c79a;
				border-radius: 50%;
				overflow: hidden;

				/* 关键：隐藏超出容器的部分 */
				image {
					width: 100%;
					/* 图片宽度充满容器 */
					height: 100%;
					/* 图片高度充满容器 */
					object-fit: cover;
					/* 保持比例，裁剪多余部分 */
				}
			}

			.headerCont {
				margin-left: 21rpx;
				flex: 1;

				.headerName {
					font-weight: 500;
					font-size: 33.33rpx;
					color: #1C2027;
				}

				.headerTag {
					color: #5a5964;
					font-weight: 400;
					font-size: 24.36rpx;

					text {
						color: #b76712;
					}
				}
			}
		}
	}

	.bottomBig {
		padding: 32rpx 22rpx;
		box-sizing: border-box;
		background: #f2f3f5;
	}

	.box {
		width: 100%;
		border-radius: 12.82rpx;
		background: #ffffff;
		padding: 27rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;

		.boxTit {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.boxTitLeft {
				display: flex;
				align-items: center;

				image {
					width: 33.97rpx;
					height: 33.97rpx;
				}

				.boxTitName {
					font-weight: 500;
					font-size: 32.05rpx;
					color: #000000;
					margin-left: 12rpx;
					position: relative;
				}

				.boxTitName::after {
					width: 139.1rpx;
					height: 10.9rpx;
					opacity: 0.47;
					background: linear-gradient(90deg, #f79f31, #ffffff);
					content: "";
					position: absolute;
					left: 0;
					bottom: 5rpx;
				}

				.boxTitNameSell::after {
					background: linear-gradient(90deg, #36dfdb, #ffffff);
				}

				.boxTitNameJob::after {
					background: linear-gradient(90deg, #5fbaff, #ffffff);
				}

				.boxTitNameLeave::after {
					background: linear-gradient(90deg, #ff5e5e, #ffffff);
				}
			}
		}

		.performance {
			border-radius: 12.82rpx;
			background: #f6f8fa;
			width: 100%;
			padding: 25rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			margin-top: 17rpx;

			.performanceName {
				color: #222222;
				font-weight: 400;
				font-size: 29.49rpx;
			}

			.performanceTag {
				width: 80.77rpx;
				height: 38.46rpx;
				border-radius: 6.41rpx;
				background: linear-gradient(90deg, #fd6702, #ffaa57);
				font-size: 24.36rpx;
				color: #FFFFFF;
				margin-left: 19rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.boxMsg {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			width: 100%;
			border-radius: 12.82rpx;
			background: #fff9f2;
			padding: 27rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.boxMsgLi {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 32rpx;
					height: 31rpx;
					border-radius: 8.33rpx;
				}

				.boxMsgNum {
					font-size: 37.18rpx;
					color: #222222;

					text {
						font-size: 23.08rpx;
						margin-left: 3rpx;
					}
				}

				.boxMsgName {
					font-size: 24.36rpx;
					color: #7F8494;
				}
			}
		}

		.materialCollection {
			width: 100%;
			border-radius: 10.26rpx;
			background: linear-gradient(90deg, #fffbf4, #fffefa);
			margin-top: 25rpx;

			.materialCollectionTop {
				padding: 16rpx 0;
				background: linear-gradient(90deg, #fff0d5, #fffefa);

				.materialCollectionName {
					font-weight: 500;
					font-size: 25.64rpx;
					color: #222222;
					padding: 0 16rpx;
					position: relative;
				}

				.materialCollectionName::after {
					content: "";
					width: 5.13rpx;
					height: 25rpx;
					background: #f79f31;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.materialCollectionBox {
				display: flex;
				flex-wrap: wrap;
				padding: 0 20rpx;
				box-sizing: border-box;

				.materialCollectionLi {
					font-size: 24.36rpx;
					color: #7F8494;
					width: 50%;
					margin-top: 22rpx;
					display: flex;
					align-items: center;

					.materialCollectionLiName {
						width: 96rpx;
						text-align: right;
					}

					text {
						font-size: 25rpx;
						color: #222222;
						margin-left: 15rpx;
					}
				}
			}
		}
	}

	.materialCollectionA {
		background: linear-gradient(90deg, #f5fbfc, #fcfefe) !important;

		.materialCollectionTop {
			background: linear-gradient(90deg, #dcf9fb, #fffefa) !important;

			.materialCollectionName::after {
				background: #36DFDB !important;
			}
		}
	}

	.materialCollectionJob {
		background: linear-gradient(90deg, #f1f9ff, #f8fcfe) !important;

		.materialCollectionTop {
			background: linear-gradient(90deg, #ddeffc, #fffefa) !important;

			.materialCollectionName::after {
				background: #5FBAFF !important;
			}
		}
	}

	/* 媒体按钮容器 */
	.media-buttons {
		display: flex;
		gap: 40rpx;
		padding-top: 20rpx;
		flex-wrap: wrap;
	}

	/* 媒体按钮样式 */
	.media-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 30rpx;
		background: #f5f7fa;
		border-radius: 8rpx;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.media-btn:active {
		background: #e8e8e8;
	}

	/* 媒体图标样式 */
	.media-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}

	/* 媒体按钮文字样式 */
	.media-btn text {
		font-size: 24rpx;
		color: #333;
	}

	.materialCollectionLeave {
		background: linear-gradient(90deg, #fff4f4, #ffffff) !important;

		.materialCollectionTop {
			background: linear-gradient(90deg, #ffe2e2, #fffefa) !important;

			.materialCollectionName::after {
				background: #FF5E5E !important;
			}
		}
	}

	/* 历史绩效箭头旋转样式 */
	.rotate-180 {
		transform: rotate(180deg);
	}

	/* ========== 以下为新增的 popup 样式（追加在最后） ========== */
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		font-size: 28rpx;
		border-bottom: 1px solid #eee;
	}

	.cancel-btn,
	.confirm-btn {
		color: #007aff;
	}

	.title {
		font-weight: bold;
		color: #333;
	}

	.month-list {
		background: #fff;
	}

	.month-item {
		padding: 24rpx 30rpx;
		font-size: 30rpx;
		color: #333;
		text-align: center;
		border-bottom: 1px solid #f0f0f0;
	}

	.month-item:last-child {
		border-bottom: none;
	}

	.month-item:active {
		background-color: #f8f8f8;
	}
</style>